<template>
  <div>
    <el-cascader @change="handData"
                 ref="myCascader"
                 :change-on-select="true"
                 :props="defaultParams"
                 :options="options"
                 size="small"
                 v-model="abc">
    </el-cascader>
  </div>
</template>

<script>
import Vue from 'vue';
// import element from 'https://unpkg.com/element-ui/lib/index.js';
// import "https://unpkg.com/element-ui/lib/theme-chalk/index.css";
// import 'https://unpkg.com/element-ui/lib/index.js';
export default {
  props: ["newjl", "items", "item"],
  data: function () {
    return {
      abc: [],
      options: [],
      selectedOptions: [],
      defaultParams: {
        label: 'name',
        value: 'id',
        children: 'childsList'
      },
      jilian: [],
      selectedOptions: [],
      values: ""
    }
  },
  computed: {
    inpuVl: function () {
      return this.$refs['myCascader'].inputValue
    }
  },
  mounted: function () {
    this.abc = this.newjl

    // const oScript = document.createElement('script');
    // oScript.type = 'text/javascript';
    // oScript.src = 'https://unpkg.com/element-ui/lib/index.js';
    // document.body.appendChild(oScript);

    // const link = document.createElement('link');
    // link.rel = 'stylesheet';
    // link.href = '../../../../node_modules/element-ui/lib/theme-chalk/index.css';
    // document.body.appendChild(link);
    var that = this
    var url = Vue.__ctx + "/sys/matecode/findAll"
    var post = Vue.baseService.get(url);
    post.then(function (res) {
      that.options = that.getTreeData(JSON.parse(res), 1)
      // that.surbeyObj = res
    }, function (status) {
      if (status == !0) {
        $.Toast.error('加载失败！' + status);
      }
    })
  },
  created: function () {

  },
  watch: {
    // "jilian": {
    //   handler(newData, oldName) {
    //     this.$emit('changing', newData, this.items)
    //     this.$emit('changings', newData, this.items, this.$refs['myCascader'])
    //     console.log("监听啊啊啊", newData)
    //   },
    //   // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    //   immediate: true,
    //   deep: true
    // }
    "jilian": function (newData) {
      this.$emit('changing', newData, this.items)
      this.$emit('changings', newData, this.items)
    },
    // newjl: {
    //   handler: (val, oldval) => {
    //     if (val) {
    //       console.log("获取父亲的值", val)
    //       this.abc = val
    //     }

    //   },
    //   immediate: true,//关键
    //   deep: true
    // },
    // "inpuVl": function (newData) {
    //   this.$emit('changings', newData, this.items)
    //         console.log("监听啊啊啊", newData)
    // }
  },
  methods: {
    handData(data) {
      // console.log("是中文的值吗?", data)
      this.values = this.$refs['myCascader'].inputValue
      this.jilian = data
    },
    getTreeData(data, flag) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].childsList.length < 1 || flag > 3) {
          // children若为空数组，则将children设为undefined
          data[i].childsList = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].childsList, flag + 1);
        }
      }

      return data;
    },
  }
}
</script>
